<template>
    <div>
        <div class="fcRightBox">
          <div class="fcHeader">
            <div class="fcHeader-title-container">
              <el-tabs style="width: 100%" v-model="form.queryScope" @tab-click="form.accessAddress='';queryList">
                <el-tab-pane label="计费IP查询" name="计费IP查询">
                  <el-select v-model="form.sumWay" placeholder="请选择" class="fcSelect" @change="queryList()">
                    <span slot="prefix" class="select-prefix">时间单位:</span>
                    <el-option v-for="item in sumWaySelectList"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"></el-option>

                  </el-select>
                  <el-select v-model="form.promotionDevice" placeholder="请选择"
                             class="fcSelect" @change="queryList()">
                    <span slot="prefix" class="select-prefix">推广设备：</span>
                    <el-option
                        v-for="item in promotionDeviceSelcetList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </el-tab-pane>
                <el-tab-pane label="计费实时IP查询" name="计费实时IP查询">
                  <el-select v-model="form.sumWay" placeholder="请选择" class="fcSelect" @change="queryList()">
                    <span slot="prefix" class="select-prefix">时间单位:</span>
                    <el-option v-for="item in sumWaySelectList"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"></el-option>

                  </el-select>

                  <el-select  v-model="form.promotionDevice" placeholder="请选择"
                              class="fcSelect" @change="queryList()">
                    <span slot="prefix" class="select-prefix">推广设备：</span>
                    <el-option
                        v-for="item in promotionDeviceSelcetList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>

                </el-tab-pane>

              </el-tabs>
              <div class="right-part">

                <div class="fcHeader-date-pick-container">
                  <el-date-picker class="custom-date-picker"
                                  format="yyyy/MM/dd"
                                  v-model="timerArray"
                                  style="width: 240px"
                                  type="daterange"
                                  align="right"
                                  range-separator="~"
                                  start-placeholder="开始日期"
                                  end-placeholder="结束日期"
                                  @change="queryList"
                                  :picker-options="pickerOptions">
                    <template slot="prefix">
                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="24" height="24" class="custom-icon" focusable="false">
                        <path fill="currentColor" d="M9 1.5H7V3h-.5a5 5 0 0 0-5 5v9.4a5 5 0 0 0 5 5h11a5 5 0 0 0 5-5V8a5 5 0 0 0-5-5H17V1.5h-2V3H9V1.5zM15 5H9v1.5H7V5h-.5a3 3 0 0 0-3 3v.5h17V8a3 3 0 0 0-3-3H17v1.5h-2V5zm5.5 5.5h-17v6.9a3 3 0 0 0 3 3h11a3 3 0 0 0 3-3v-6.9z"></path>
                      </svg>
                    </template>
                  </el-date-picker>
                </div>

              </div>
            </div>
          </div>
            <!--           表格-->
            <div class="fcHeader-container fcHeader-container-custom-dash">
                <div class="custom-dash-container" style="margin-bottom: 20px">
                    <div class="custom-dash-container-item">
                        <div class="card-type">消费<span class="card-type-icon"><svg xmlns="http://www.w3.org/2000/svg"
                                                                                   fill="none" viewBox="0 0 24 24"
                                                                                   min-width="24" height="24"
                                                                                   class="dls-icon " focusable="false"><path
                                fill="currentColor"
                                d="M12.054 18.34a1.242 1.242 0 1 0 0-2.484 1.242 1.242 0 0 0 0 2.484zM8.3 9.7a3.7 3.7 0 1 1 5.813 3.038c-.029.021-.064.05-.106.084-.12.1-.28.247-.438.431-.33.385-.569.835-.569 1.307h-2c0-1.148.57-2.048 1.05-2.608a5.739 5.739 0 0 1 .819-.78l-.004-.008a1.82 1.82 0 0 0 .08-.05l.011-.009.072-.052.009-.006A1.69 1.69 0 0 0 13.7 9.7a1.7 1.7 0 1 0-3.4 0h-2z"></path><path
                                fill="currentColor" fill-rule="evenodd"
                                d="M23 12c0 6.075-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1s11 4.925 11 11zm-2 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"
                                clip-rule="evenodd"></path></svg></span></div>
                        <div class="card-content"><span class="number">{{ invalidClickTopList.billableClickAmount}}</span><span class="unit">元</span></div>
                        <div class="card-other-info"><span class="info">计费点击</span><span class="number">{{ invalidClickTopList.billableClick}}次</span>
                        </div>
                    </div>
                    <div class="custom-dash-container-item">
                        <div class="card-type">节省预算</div>
                        <div class="card-content"><span class="number">{{ invalidClickTopList.invalidClickAmount}}</span><span class="unit">元</span><span
                                class="no-charge">共<span class="no-charge-count">{{ invalidClickTopList.invalidClickAmount}}次</span>点击未计费</span></div>
                        <div class="card-other-info"><span class="info">无效点击</span><span
                                class="number">5920次，</span><span class="info">返款点击</span><span class="number">{{ invalidClickTopList.invalidClick}}次</span>
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="24"
                                 height="24" class="dls-icon " focusable="false">
                                <path fill="currentColor" fill-rule="evenodd"
                                      d="M1 12c0 6.075 4.925 11 11 11s11-4.925 11-11S18.075 1 12 1 1 5.925 1 12zm10-5.4v7h2v-7h-2zm2.25 9.55a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0z"
                                      clip-rule="evenodd"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="custom-dash-container-item">
                        <div class="card-type">保护前消费</div>
                        <div class="card-content"><span class="number">{{ invalidClickTopList.filterateClickAmount}}</span><span class="unit">元</span></div>
                        <div class="card-other-info"><span class="info">通过搜索推广进入网站的滤前总点击</span><span class="number">{{ invalidClickTopList.filterateClick}}次</span>
                        </div>
                    </div>
                    <div class="custom-dash-container-item">
                        <div class="card-type">过滤前总点击</div>
                        <div class="custom-dash-container-item-chart">
                            <div>
                                <div class="card-content"><span class="number">{{ invalidClickTopList.filterateClick}}</span><span class="unit">次</span>
                                </div>
                                <div class="card-other-info"><span class="legend-radio"></span><span
                                        class="info">无效点击占比</span><span class="number">{{ invalidClickTopList.invalidClickRate}}</span></div>
                            </div>
                            <div class="graph">
                                <div class="one-charts-pie one-charts-pie-small">
                                    <div>
                                        <div class="one-charts-pie-chart-container">
                                            <div class="one-charts-base-chart one-charts-base-chart-small"
                                                 _echarts_instance_="ec_1711526547196"
                                                 style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative;">
                                                <div style="position: relative; width: 100px; height: 160px; padding: 0px; margin: 0px; border-width: 0px;">
                                                    <canvas data-zr-dom-id="zr_0" min-width="100" height="160"
                                                            style="position: absolute; left: 0px; top: 0px; width: 100px; height: 160px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
                                                </div>
                                                <div class=""></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div ref="chart" style="width: 100%;min-width: 800px;height: 400px;margin-left: 20px"></div>
                <div class="">
                    <div class="contentHeader">
                        <el-input placeholder="请搜索IP地址" style="width: 200px" v-model="form.pAddress"
                                  @change="queryList">  <i slot="suffix" class="el-input__icon el-icon-search"></i></el-input>
                      <div class="contentHeader_right" style="justify-content: flex-end">
                        <el-dropdown @command="handleCommand" trigger="click" style="margin-right: 16px">
                          <el-button style="width: 160px;padding: 6px;text-align: left">
                            <span style="display:inline-block;width: 120px;color: rgba(19, 22, 26, 0.9);font-size: 12px"> <i v-if="!selectedDivision">细分</i><i v-else>细分：</i>{{ selectedDivision }}</span> <i class="el-icon-arrow-down el-icon--right" style="color: rgba(19, 22, 26, 0.9)"> </i>
                          </el-button>
                          <!-- 第一层子菜单 -->
                          <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="hour">小时</el-dropdown-item>
                            <el-dropdown-item command="purchase">购买方式</el-dropdown-item>
                            <el-dropdown-item command="device">推广设备</el-dropdown-item>
                            <el-dropdown-submenu>
                              <template slot="title">地域</template>
                              <!-- 第二层子菜单 -->
                              <el-dropdown-item command="province">分省</el-dropdown-item>
                              <el-dropdown-item command="city">分地市</el-dropdown-item>
                            </el-dropdown-submenu>
                          </el-dropdown-menu>
                        </el-dropdown>

                        <el-dropdown  style="margin-right: 16px">
                          <el-button type="primary"
                                     style="width: 101px; font-size: 12px;height: 28px;line-height: 28px;padding: 0; background-color: #e2e6f0;color: #000; border: 1px solid #dfe4ea; ">
                  <span style="display: inline-block;height: 100%;border-right:1px solid #c9c9c9;padding-right: 12px"> {{
                      value11
                    }}</span>

                            <i style="color: #3b3b3b;font-weight: 600" class="el-icon-arrow-down el-icon--right"></i>
                          </el-button>
                          <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-for="item in options11" :key="item.value">{{ item.label }}</el-dropdown-item>

                          </el-dropdown-menu>
                        </el-dropdown>
                        <el-select style="margin-right: 16px;" v-model="value" placeholder="请选择" class="select-with-prefix1">
                          <el-option
                              v-for="item in options2"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                          </el-option>
                        </el-select>
                        <el-button class="rightBt" style="padding: 6px 12px;margin-right: 8px;" @click="handleTabClick">重置列宽</el-button>

                      </div>
                    </div>
                    <el-table
                            :data="tableList"
                            style="width: 100%;background: #EBEDF5"
                            :default-sort="{prop: 'date', order: 'descending'}"
                    >
                        <el-table-column
                                prop="createTime"
                                label="日期"
                                sortable
                                min-width="130">
                        </el-table-column>
                        <el-table-column
                                prop="ipAddress"
                                label="IP地址"

                                min-width="180">
                        </el-table-column>
                        <el-table-column min-width="130"    sortable align="right"
                                         prop="filterateClick"
                                         label="过滤前点击量">

                        </el-table-column>
                        <el-table-column
                                prop="filterateClickAmount"  sortable align="right"   min-width="130"
                                label="过滤前点击金额">

                        </el-table-column>
                        <el-table-column  sortable align="right"   min-width="130"
                                prop="invalidClick"
                                label="无效点击量">

                        </el-table-column>
                        <el-table-column
                                prop="invalidClickAmount"
                                label="无效点击金额"
                                sortable align="right"
                                min-width="130">
                        </el-table-column>
                        <el-table-column
                                prop="billableClick"
                                label="计费点击量"
                                sortable align="right"   min-width="130">
                        </el-table-column>
                    </el-table>

                  <div
              style="height: 80px;display: flex;align-items: center;justify-content: flex-end;width: 100%;margin-top: 10px;line-height: 80px">
            <div>
              <el-pagination background
                             style="min-width: 380px;height: 80px;ox-sizing: border-box;padding-top: 23px"
                             @size-change="handleSizeChange"
                             @current-change="handleCurrentChange"
                             :current-page="form.pageNum"
                             :page-size="form.pageSize"
                             :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
                             layout="sizes, prev, pager, next,jumper"
                             :total="form.total"
              ></el-pagination>
            </div>
            <div style="display: block">
              <el-button
                  style="display: block;margin-left: 0px; background: #ebedf5;border-color: #ebedf5;color: rgba(19, 22, 26, 0.9);"
                  type="primary" size="small" @click="queryList">确定
              </el-button>

            </div>

          </div>
                </div>

            </div>


        </div>

    </div>
</template>

<script>
    import ItemMixins from "./item.mixins";
    import {invalidClickReportList, invalidClickSumList, invalidClickTopList} from '@/services/model/datacenter'
    import * as echarts from 'echarts';

    export default {
        mixins: [ItemMixins],
        data() {
            return {
                chartInstance: null,
                keySumList: [],
                searchSumList: [],
                form: {queryScope: '计费IP查询'},
                isToggleStatus: false,

                chart: null,
                value: '下载',
                accessAddressSelcetList: [{
                    value: '全部',
                    label: '全部'
                }, {
                    value: '小程序访问地址',
                    label: '小程序访问地址'
                },],
                conIndicatorsSelectList: [{
                    value: '咨询按钮点击量',
                    label: '咨询按钮点击量'
                }, {
                    value: '三句话咨询量',
                    label: '三句话咨询量'
                }, {
                    value: '一句话咨询量',
                    label: '一句话咨询量'
                }, {
                    value: '小程序线索量',
                    label: '小程序线索量'
                },

                    {
                        value: '有意向客户量',
                        label: '有意向客户量'
                    }, {
                        value: '聊到相关业务',
                        label: '聊到相关业务'
                    }, {
                        value: '回访-电话接通量',
                        label: '回访-电话接通量'
                    }, {
                        value: '回访-信息确认量',
                        label: '回访-信息确认量'
                    },

                    {
                        value: '回访-发现意向量',
                        label: '回访-发现意向量'
                    }, {
                        value: '回访-高潜成交量',
                        label: '回访-高潜成交量'
                    }, {
                        value: '回访-成单客户量',
                        label: '回访-成单客户量'
                    }, {
                        value: '表单按钮点击量',
                        label: '表单按钮点击量'
                    },
                    {
                        value: '表单调起按钮点击量',
                        label: '表单调起按钮点击量'
                    }, {
                        value: '表单提交成交量',
                        label: '表单提交成交量'
                    }, {
                        value: '电话按钮点击量',
                        label: '电话按钮点击量'
                    }, {
                        value: '电话拨通量',
                        label: '电话拨通量'
                    },

                    {
                        value: '下载（预约）按钮点击量',
                        label: '下载（预约）按钮点击量'
                    }, {
                        value: '预约量',
                        label: '预约量'
                    }, {
                        value: '申请量',
                        label: '申请量'
                    }, {
                        value: '授信量',
                        label: '授信量'
                    },

                    {
                        value: '放款量',
                        label: '放款量'
                    }, {
                        value: '短信咨询按钮单击量',
                        label: '短信咨询按钮单击量'
                    }, {
                        value: '地图按钮点击量',
                        label: '地图按钮点击量'
                    }, {
                        value: '抽奖按钮点击量',
                        label: '抽奖按钮点击量'
                    },

                    {
                        value: '预约按钮点击量',
                        label: '预约按钮点击量'
                    }, {
                        value: '投票按钮点击量',
                        label: '投票按钮点击量'
                    }, {
                        value: '评价按钮点击量',
                        label: '评价按钮点击量'
                    }, {
                        value: '关注按钮点击量',
                        label: '关注按钮点击量'
                    },

                    {
                        value: '店铺起调量',
                        label: '店铺起调量'
                    }, {
                        value: '粉丝关注成功量',
                        label: '粉丝关注成功量'
                    }, {
                        value: '微信起调按钮点击量',
                        label: '微信起调按钮点击量'
                    }, {
                        value: '微信加粉成功量',
                        label: '微信加粉成功量'
                    },
                    {
                        value: '二次跳转量',
                        label: '二次跳转量'
                    }, {
                        value: '电商订单量',
                        label: '电商订单量'
                    }, {
                        value: '订单提交成功量',
                        label: '订单提交成功量'
                    }, {
                        value: '客户自定义转化量',
                        label: '客户自定义转化量'
                    },

                    {
                        value: '微信复制按钮点击量',
                        label: '微信复制按钮点击量'
                    }, {
                        value: '店铺停留转换量',
                        label: '店铺停留转换量'
                    }, {
                        value: '综合线索收集',
                        label: '综合线索收集'
                    }, {
                        value: '商品支付成功量',
                        label: '商品支付成功量'
                    },


                    {
                        value: '有效咨询',
                        label: '有效咨询'
                    }, {
                        value: '其他转化量(落地页)',
                        label: '其他转化量(落地页)'
                    }, {
                        value: '微信小程序调起人数',
                        label: '微信小程序调起人数'
                    }, {
                        value: '激活人数',
                        label: '激活人数'
                    },

                    {
                        value: '注册人数',
                        label: '注册人数'
                    }, {
                        value: '付费人数',
                        label: '付费人数'
                    }, {
                        value: '付费次数',
                        label: '付费次数'
                    }, {
                        value: '商品下单成功量',
                        label: '商品下单成功量'
                    },

                    {
                        value: '深度使用量',
                        label: '深度使用量'
                    }, {
                        value: '次日留存人数',
                        label: '次日留存人数'
                    }, {
                        value: '7日留存人数',
                        label: '7日留存人数'
                    }, {
                        value: '登录人数',
                        label: '登录人数'
                    },
                    {
                        value: '应用调起人数',
                        label: '应用调起人数'
                    }, {
                        value: '2日留存人数',
                        label: '2日留存人数'
                    }, {
                        value: '3日留存人数',
                        label: '3日留存人数'
                    }, {
                        value: '4日留存人数',
                        label: '4日留存人数'
                    },

                    {
                        value: '5日留存人数',
                        label: '5日留存人数'
                    }, {
                        value: '6日留存人数',
                        label: '6日留存人数'
                    }, {
                        value: '14日留存人数',
                        label: '14日留存人数'
                    }, {
                        value: '其它转化量(APP)',
                        label: '其它转化量(APP)'
                    },
                ],
                options2: [{
                    value: '下载',
                    label: '下载'
                }, {
                    value:  '发送邮箱',
                    label: '发送邮箱'
                }],
                isSelect: '账户整体',
                activeName: '整体走势',
                invalidClickSumList: [],
                invalidClickTopList: []
            };

        },
        methods: {
            refch() {
                this.invalidClickSum()
                this.initChart()
                this.invalidClickTop()
                this.queryList()
            },
            async invalidClickTop() {
                this.form.createTime = this.formatDate(this.timerArray[0]);
                this.form.updateTime = this.formatDate(this.timerArray[1]);
                let res = await invalidClickTopList(this.form)
                this.invalidClickTopList = res.rows || []

                 this.form.total = Math.ceil(Number(res.total) );
            },
            async invalidClickSum() {
                this.form.createTime = this.formatDate(this.timerArray[0]);
                this.form.updateTime = this.formatDate(this.timerArray[1]);
                let res = await invalidClickSumList(this.form)
                this.invalidClickSumList = res.rows || []

                 this.form.total = Math.ceil(Number(res.total) );
            },
            async queryList() {
                this.form.createTime = this.formatDate(this.timerArray[0]);
                this.form.updateTime = this.formatDate(this.timerArray[1]);
                let res = await invalidClickReportList(this.form)
              const modifiedArray = this.replaceNullWithDash( res.rows);
              this.tableList = modifiedArray|| []

                 this.form.total = Math.ceil(Number(res.total) );
            },
            initChart() {
                this.chart = echarts.init(this.$refs.chart);
                this.chart.setOption({
                    title: {
                        text: '近期数据趋势'
                    },
                    tooltip: {},
                    legend: {
                        data: ['网站流量', '搜索引擎']
                    },
                    xAxis: {  axisTick: {
            show: false // 隐藏X轴刻度
          },
                        data: ["2023-10-29", "2023-11-21", "2023-12-08", "2023-12-25"]
                    },
                     yAxis: {},   symbol: 'none' ,    // 确保数据点完全隐藏
                    series: [{ lineStyle: {
            color: '#00aaff'  // 设置线条颜色
          },
            itemStyle: {
            color: '#00aaff'  // 设置线条颜色
          },showSymbol: false,
                        name: '计算结果',
                        type: 'line',
                        data: [5, 20, 36, 10, 10, 20]
                    }]
                });
            },

            handleClick(tab, event) {
                console.log(tab, event);
            }
        },
        mounted() {
this.refch()
        },
    };
</script>
<style>
</style>
<style scoped lang="less">
    .fcRightBox {
        height: 100%;
        width: calc(100vw - 240px);

        .fcHeader {
            background: #fff;
            border-radius: 6px;
            padding: 16px 24px 20px;
            margin-bottom: 24px;

            .fcHeader-title-container {

                position: relative;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: center;

                .left-part {

                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    align-items: center;

                    .title {
                        font-size: 20px;
                        color: #282c33;
                    }

                    .refresh-data-time {
                        display: inline-block;
                        margin-bottom: 4px;
                    }

                }

                .right-part {
                    text-align: right;
                    position: absolute;
                    right: 10px;
                    top: 0;
                    width: 20%;

                    .baidu-market-tip {
                        color: #a8b0bf;
                        font-size: 12px;

                        .baidu-market-name {
                            color: #0052cc;
                        }
                    }

                    .fcHeader-date-pick-container {
                        margin-left: 12px;
                        flex-wrap: wrap;

                        /deep/ .el-checkbox {
                            margin-left: 12px;
                        }
                    }
                }
            }
        }

        .fcHeader-container-custom-dash {
            border-top-right-radius: 0;
            border-top-left-radius: 0;
        }

        .fcHeader-container {
            position: relative;
            background: #fff;
            border-radius: 6px;
            padding: 24px;
            padding-top: 12px;

            .fcHeader-container-title-box {
                position: absolute;
                right: 24px;
                top: 20px;
                height: 28px;
                display: flex;
                align-items: center;

                .fcHeader-container-title-tip {
                    font-size: 12px;
                    color: #a8b0bf;
                    z-index: 9;
                }
            }
        }

        .account-report-radio-container {
            width: calc(100% - 48px);
            display: flex;

            overflow: auto;

            .account-report-radio-card {
                min-width: 208px;
                padding: 12px 16px;
                border-radius: 6px;
                border: 1px solid #c4daff;
                background: #fff;
                margin-right: 16px;
                cursor: pointer;
                color: #545b66;
                font-size: 14px;
                font-weight: 400;
                line-height: 20px;

                .account-report-radio-card-base {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .account-report-radio-card-base-cost {
                        display: flex;
                        align-items: center;
                        color: #282c33;
                        font-weight: 500;

                        .account-report-radio-card-base-cost-num {
                            font-size: 20px;
                            line-height: 28px;
                            margin: 0 4px;
                        }
                    }
                }
            }

            .account-report-radio-card-selected {
                border: 1px solid #0054e6;
                color: #0054e6;

                .account-report-radio-card-base-cost {
                    color: #0054e6;
                }
            }

        }
    }
</style>
<style scoped>
    .dashboard .box-card {
        margin-bottom: 20px;
    }

    .dashboard .text-item {
        padding: 20px 0;
        text-align: center;
    }

    .dashboard .number {
        font-size: 24px;
        color: #333;
    }

    .dashboard .change {
        font-size: 14px;
        color: #333;
    }

    .dashboard .change el-icon {
        color: #67C23A;
    }

    .chart {
        width: 100%;
    }

    .contentHeader {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

    }

    .contentHeader_right {
  min-width: 300px;
        display: flex;
        align-items: center;
        justify-content: space-between;

    }

    .insight-report-data-card-sum-card {
        width: 24%;
        background-color: #fff;
        min-height: 124px;
        border-radius: 4px;
        padding: 16px 16px 12px;
        display: flex;
        margin: 10px 0;
        flex-direction: column;


    }

    .insight-report-data-card-sum-card-title {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #848b99;
        line-height: 1.4;
        font-weight: 400;
    }

    .insight-report-data-card-sum-card-value {
        font-size: 24px;
        color: #333;
        line-height: 1.4;
        font-weight: 500;
        margin-top: 4px;
    }

    .insight-report-data-card-sum-card-rate {
        margin-top: 8px;
        display: flex;
        justify-content: space-between;
    }

    .insight-report-data-card-sum-card-rate-content {
        font-size: 12px;
        color: #848b99;
        line-height: 1.4;
        font-weight: 400;
    }

    .chart-area {
        width: 200px;
    }

.custom-dash-container{
  display: flex;
  width: 100%;
  min-height: 157px;
  margin: 24px 24px 0;
  overflow-x: auto;
  overflow-y: hidden;

}
    .custom-dash-container-item  {
      min-width: 273px;
      flex: 1;
      background-color: #f6f7fa;
      height: 140px;
      border-radius: 4px;
      margin-left: 12px;
      padding: 20px;
    }
    .custom-dash-container-item .card-type {
      font-size: 14px;
      color: #545b66;
    }
    .custom-dash-container-item .card-type-icon {
      padding-left: 5px;
    }
    .custom-dash-container-item .card-content {
      margin-top: 8px;
    }
    .custom-dash-container-item .card-content .number {
      font-size: 24px;
      color: #282c33;
    }
    .custom-dash-container-item .card-content .unit {
      font-size: 16px;
      color: #282c33;
      padding-left: 8px;
    }
    .custom-dash-container-item .card-other-info {
      margin-top: 11px;
    }
    .custom-dash-container-item .card-other-info .info {
      font-size: 12px;
      color: #545b66;
    }
    .custom-dash-container-item .card-other-info .number {
      font-size: 14px;
      color: #282c33;
    }
</style>

